import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
import { FloatButton } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import type { Mapless } from '@/components/MapView/Mapless';
import type { IconType } from '../index.d';
import styles from '../index.module.less';

type ShowHideProps = {
  manaId: string;
  mapless: Mapless | undefined;
};

// TODO group show-hide
const ShowHide = ({ manaId, mapless }: ShowHideProps) => {
  const [hideManager, setHideManager] = useState(false);

  const icons: IconType = useMemo(
    () => ({
      show: <EyeOutlined />,
      hide: <EyeInvisibleOutlined />,
    }),
    [],
  );

  useEffect(() => {
    if (manaId && mapless) {
      // TODO 优化为可以获取Manager|IManager避免耦合
      const m = mapless.getByName(manaId);
      m?.setVisible(!hideManager);
    }
  }, [hideManager, manaId, mapless]);

  return (
    <FloatButton
      className={styles.xdbtn}
      icon={hideManager ? icons.hide : icons.show}
      shape="square"
      tooltip={{
        title: hideManager ? '点击显示' : '点击隐藏',
        placement: 'left',
      }}
      onClick={() => {
        setHideManager(!hideManager);
      }}
    />
  );
};

export default ShowHide;
